<script setup lang="ts">
import {reactive, ref} from "vue";

const List = ref([
  {
    id: 1,
    name: "01",
  },
  {
    id: 2,
    name: "02"
  },
  {
    id: 3,
    name: "03"
  },
  {
    id: 4,
    name: "04"
  },
  {
    id: 5,
    name: "05"
  },
  {
    id: 6,
    name: "06"
  },
  {
    id: 7,
    name: "07"
  },
  {
    id: 8,
    name: "08"
  },
  {
    id: 9,
    name: "09"
  },
  {
    id: 10,
    name: "10"
  },
  {
    id: 11,
    name: "11"
  },
  {
    id: 12,
    name: "12"
  },
])

let startPosition = reactive({})
let endPosition = reactive({})
let draggingMoveVector = reactive({})
let draggedMoveVector = reactive({})
let draggingMoveVectorRange = reactive({})
// 鼠标按下操作
const onMouseDown = (e) => {
  e.stopPropagation();
  startPosition = getPosition(e); // 获取鼠标按下时的位置
  if (outerElement && element) {
    const outerElementRect = outerElement.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    draggingMoveVectorRange = [outerElementRect.top - elementRect.top, outerElementRect.bottom - elementRect.bottom, outerElementRect.left - elementRect.left, outerElementRect.right - elementRect.right];
  }
};

const onMouseMove = (e) => {
  if (startPosition && draggingMoveVectorRange) {
    endPosition = getPosition(e);
    const currentMoveVector = formatV(minusV(startPosition, endPosition), draggingMoveVectorRange);
    draggingMoveVector = addV(draggedMoveVector, currentMoveVector);
    element.style.transform = setTranslatePosition(startTransform, draggingMoveVector);
  }
};
const onMouseUp = (e) => {
  if (startPosition && draggingMoveVectorRange) {
    draggedMoveVector = draggingMoveVector;
  }
  startPosition = null;
};


</script>

<template>
  <div class="app-container">
    <div class="app-main">
      <div class="app-item" v-for="(it, index) in List">
        <div v-darg="true" class="ove-item">{{ index }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100vh;
  padding: 20px;

  .app-main {
    width: 100%;
    height: 100%;
    // overflow: scroll; /* 添加滚动条 */
    overflow: auto; /* 自动决定是否显示滚动条 */
    display: flex;
    flex-wrap: wrap; /* 允许项换行 */
    //row-gap: 10px;
    margin: 0 auto;
    align-content: flex-start;
  }
}

.app-main::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.app-item {
  display: flex;
  justify-content: center;
  align-items: center;

  .ove-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    background-color: cyan;
    // 圆角
    border-radius: 20px;
  }
}
</style>
